<script setup>
import { onMounted, ref, watch } from 'vue'
import { reqGetDrawData } from '@/api/draw/index.js'
import DrawItem from '@/components/DrawItem.vue'
import PrizeItem from '@/components/PrizeItem.vue'

const searchValue = ref('')
const page = ref(1)
const total = ref(0)
const loading = ref(false)
const refreshing = ref(false)
const drawList = ref([])
const prizeList = ref([])
const showPrize = ref(false)
const prizeLoading = ref(false)
const vipType = ref('')
const typeList = [
  { value: '', text: '全部'},
  { value: 1, text: '普通用户' },
  { value: 2, text: '主播' },
  { value: 3, text: '推广员'},
]

onMounted(() => {
  refreshing.value = true
  getData()
})

const getData = async () => {
  try {
    const result = await reqGetDrawData({
      page: page.value,
      userId: searchValue.value,
      type: vipType.value,
    })

    if (result.code === 200) {
      if (page.value === 1) {
        drawList.value = result.data.data
      } else {
        drawList.value.push(...result.data.data)
      }
      total.value = result.data.total
      page.value++
    }
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

const onSearch = () => {
  refreshing.value = true
  onRefresh()
}

watch(searchValue, (newVal) => {
  if (!newVal.trim()) {
    refreshing.value = true
    onRefresh()
  }
})

const onRefresh = () => {
  refreshing.value = true
  page.value = 1
  total.value = 0
  getData()
}

const onLoadMore = () => {
  getData()
}

/* const getPrize = async (id) => {
  showPrize.value = true
  prizeList.value = []
  prizeLoading.value = true

  try {
    const result = await reqGetDrawPrize({
      box_order_id: id
    })

    if (result.code === 200) {
      prizeList.value = result.data.data
    }
  } catch (e) {
  } finally {
    prizeLoading.value = false
  }
} */

const changeVipType = () => {
  onRefresh()
}
</script>

<template>
  <div class="draw-container">
    <van-search
      v-model="searchValue"
      show-action
      clearable
      placeholder="请输入用户id"
      @search="onSearch"
      clear-trigger="always"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-dropdown-menu>
      <van-dropdown-item
        @change="changeVipType"
        v-model="vipType"
        :options="typeList"
      />
    </van-dropdown-menu>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="page * 10 >= total"
        finished-text="没有更多了"
        @load="onLoadMore"
      >
        <DrawItem v-for="item in drawList" :key="item.id" :box="item" />
      </van-list>
      <van-back-top bottom="10vh" />
    </van-pull-refresh>

    <van-action-sheet v-model:show="showPrize" title="获得的商品">
      <div class="prize-content">
        <van-list
          v-model:loading="prizeLoading"
          :finished="!prizeLoading"
          finished-text="没有更多了"
        >
          <PrizeItem v-for="prize in prizeList" :key="prize.id" :prize="prize"></PrizeItem>
        </van-list>
      </div>
    </van-action-sheet>
  </div>
</template>

<style scoped lang="less">
.prize-content {
  padding: 10px;
}
</style>
